<template>
  <div class="user">
    <div class="title-msg">用户管理</div>

    <div class="option-site">

      <div class="option-site-head"><span>用户列表</span></div>

      <div class="option-site-neck">
        <Neck :sex="parseInt(userListAndRecordInfo.sex)"
              :business="parseInt(userListAndRecordInfo.business)"
              :search-u-name-or-name="userListAndRecordInfo.username_or_name"
              @screen="mScreen"
              @search="mSearch">
        </Neck>
      </div>

      <div class="option-site-table">
        <Table :list="userListAndRecordInfo.page.list"
                @delete="mDelete"></Table>
        <Footer :count="userListAndRecordInfo.page.count"
                :total="userListAndRecordInfo.page.total"
                :index="userListAndRecordInfo.page.index"
                @pre="mPre"
                @next="mNext">
        </Footer>
      </div>

    </div>

  </div>
</template>

<script>
  import Table from "./childComps/Table";
  import Footer from "./childComps/Footer";
  import Neck from "./childComps/Neck";

  import {getUserList, deleteUser} from 'network/admin'

  export default {
    inject: ['reload'],
    name: "User",
    components: {
      Table,
      Footer,
      Neck,
    },
    data() {
      return {
        userListAndRecordInfo: { // 用户信息和指定的检索信息
          page: { // 当前数据的信息
            list: [], // 展示的数据集合
            count: 0, // 总记录数
            total: 0, // 总页数
            index: 1, // 当前页,默认第1页
          },
          sex:0, // 性别
          business: 0, // 是否为商家
          username_or_name: '', // 用户名或名字
        }
      }
    },
    mounted() {
      this.mGetUserList() // 首次加载调用获取全部用户列表的方法
    },
    methods: {

      /**网络请求的方法*/
      mGetUserList() { // 首次加载,获取全部用户列表
        getUserList(0, 0, '', 1)
          .then(result => {
            // console.log(result);
            this.userListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取用户列表失败');
          })
      },
      mScreen({s, b, search}) { // 筛选
        getUserList(s, b, search, 1)
          .then(result => {
            // console.log(result);
            this.userListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);

            this.$bus.$emit('userBus',{ // 通过事件总线发送事件,以使footer组件接收,实现筛选后还能使用footer进行上一页和下一页
              s: s,
              b: b,
              search: search,
            })
          })
          .catch(error => {
            console.log('筛选用户失败' + error);
          })
      },
      mSearch({s, b,search}) { // 搜索
        console.log(s +'--' + b + '---' + search);
        getUserList(s, b, search, 1)
          .then(result => {
            // console.log(result);
            this.userListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);

            this.$bus.$emit('userBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              s: s,
              b: b,
              search: search
            })
          })
          .catch(error => {
            console.log('查询用户失败' + error);
          })
      },
      mDelete({uname}) { // 删除用户
        // console.log('delete------' + uname);

        deleteUser(uname); // 调用删除用户的方法
        // this.reload(); // 刷新当前页面
        this.$router.go(0)

        this.$succ_ty_toast.toShow('删除用户' + uname + '成果', 5000);
      },
      mPre({i, s, b, search}) { // 上一页
        console.log('-----i=' + i - 1 + ';---s=' + s +';---b=' + b + ';---' + search);
        getUserList(s, b, search, i-1)
          .then(result => {
            // console.log(result);
            this.userListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);

            this.$bus.$emit('userBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              s: s,
              b: b,
              search: search
            })
          })
          .catch(error => {
            console.log('查询上一页用户失败' + error);
          })

      },
      mNext({i, s, b, search}) { //
        // console.log('-----i=' + i + 1 + ';---s=' + s +';---b=' + b + ';---' + search);
        getUserList(s, b, search, i+1)
          .then(result => {
            // console.log(result);
            this.userListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);

            this.$bus.$emit('userBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              s: s,
              b: b,
              search: search
            })
          })
          .catch(error => {
            console.log('查询下一页用户失败' + error);
          })
      },
    }
  }
</script>

<style scoped>
  .user {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #fff;
  }
  .option-site-head {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;

    border-bottom: 1px solid #cdcdcd;
    background-color: #007bff;

    color: white;
  }
  .option-site-neck {
    margin-left: 20px;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;

    border-bottom: 1px solid #cdcdcd;

    /*background-color: green;*/
  }
  /*.option-site-neck select {*/
  /*  width: 100px;*/
  /*  height: 30px;*/
  /*  margin-right: 20px;*/

  /*  border-radius: 4px;*/
  /*  border: 1px solid #cdcdcd;*/
  /*  background-color: #fff;*/
  /*}*/
  /*.option-site-neck .screen-btn {*/
  /*  height: 30px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*  background-color: #007bff;*/
  /*}*/
  /*.option-site-neck .screen-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .search-text {*/
  /*  width: 200px;*/
  /*  height: 28px;*/
  /*  transform: translateX(120px);*/
  /*}*/
  /*.option-site-neck .search-btn {*/
  /*  height: 32px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #007bff;*/
  /*  transform: translateX(130px);*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .search-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .add-btn {*/
  /*  transform: translateX(435px);*/

  /*  height: 30px;*/
  /*  width: 80px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #28a745;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .add-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/

  .option-site-table {
    margin-left: 20px;
    margin-right: 20px;

    height: 70%;

    /*background-color: green;*/
  }

</style>